<template>
  <div class="updateInfoWrapper">
    <div class="icon">
      <span>头像</span>
      <div class="blank"></div>
      <img :src="userImg" alt="">
    </div>
    <div class="nickName">
      <span>昵称</span>
      <input type="text" v-model="nickname">
    </div>
    <div class="sex" @click="showSelectSex">
      <span>性别</span>
      <div class="sexName">{{sex}}</div>
      <!--<img class="arrow" src="http://static.52letsgo.cn/zz/wechatimg/ic_arrow_right_gray.png" alt="">-->
    </div>
    <group>
      <datetime confirm-text="确认" cancel-text="取消" :min-year="minYear" :value.sync="birthday" :max-year="maxYear" @on-change="regchange" title="生日"></datetime>
    </group>
    <div class="sexSelect">
      <actionsheet cancel-text="取消" :show.sync="showSex" :menus="sexMenu" @on-click-menu="click" show-cancel></actionsheet>
    </div>
    <div style="height: 1rem;width: 100%;background-color: #f7f7f7;"></div>
    <div class="changePwd" v-link="{path: '/modifyPwd'}">
      <span>修改密码</span>
    </div>
    <div class="update-btn">
       <x-button type="warn" @click="updateInfo">保存信息</x-button>
    </div>
  </div>
</template>
<script>
  import { Datetime, Group, Actionsheet, XButton } from './../../components'
  var LocalStorageUtil = require('./../../commons/js/LocalStorageUtil.js')
  var MyRequest = require('./../../commons/js/MyRequest.js')
  var Global = require("./../../commons/js/Global.js")
  export default {
    data () {
      return {
        userInfo: LocalStorageUtil.getItem("User"),
        minYear: 1900,
        maxYear: 2100,
        birthday: '',
        nickname: '',
        sex: '',
        userImg: '',
        showSex: false,
        sexMenu: {
          menu1: '男',
          menu2: '女'
        },
      }
    },
    components: {
      Datetime,
      Group,
      Actionsheet,
      XButton
    },
    ready: function () {
      if(this.userInfo.photo == '' || this.userInfo.photo == "http://m.52letsgo.cn") {
        this.userImg = 'http://static.52letsgo.cn/zz/wechatimg/ic_user_head.png'
      } else {
        this.userImg = this.userInfo.photo
      }
      this.init()
      Global.closeLoading()
    },
    methods: {
      init () {
        this.birthday = this.userInfo.birthday
        this.nickname = this.userInfo.nickname
        this.sex = this.userInfo.sex
      },
      regchange (value) {
        this.birthday = value
      },
      regclearValue () {
        this.birthday = ""
      },
      click (key) {
        this.sex = this.sexMenu[key]
      },
      showSelectSex () {
        this.showSex = true
      },
      updateInfo () {
        if(!this.birthday || !this.nickname || !this.sex) {
          Global.showToast("信息不完整", this)
          return
        }
        var data = {
          action: 'update',
          id: this.userInfo.id
        }
        if(this.birthday) {
          data.birthday = this.birthday
        }
        if(this.sex) {
          data.sex = this.sex
        }
        if(this.nickname) {
          data.nickname = this.nickname
        }
        MyRequest.MyGetWithToast("Login", this, function(result, that) {
          LocalStorageUtil.setItem("User", result.data)
          history.go(-1)
        }, data); 
      }
    }
  }
</script>
<style lang="less">
  @import './updateUserInfo.less';
</style>